<template>
  <ScalablePage>
    <div
      class="big-screen sbgl flex-between"
      style="width: 480px; overflow: hidden;"
    >
      <div class="screen-left">
        <div class="device-count">
          <!-- <img src="@/assets/sbgl/screen-title01.png" alt="" class="screen-title" /> -->
          <div class="screen-title-container-l1">
            <img
              src="@/assets/sbgl/screen-title01.png"
              alt=""
              class="screen-title"
            />
            <div class="screen-title-text-l1">更多</div>
          </div>
          <div class="count-top flex-between">
            <div class="count-option">
              <div class="count-value">{{ zhongyao.num1 }}</div>
              <div class="count-title">{{ zhongyao.name1 }}</div>
            </div>
            <div class="count-option">
              <div class="count-value">{{ zhongyao.num2 }}</div>
              <div class="count-title">{{ zhongyao.name2 }}</div>
            </div>
            <div class="count-option">
              <div class="count-value">{{ shebei.shebeiguanli.length }}</div>
              <div class="count-title">设备名称</div>
            </div>
          </div>
          <div class="count-center">
            <div class="count-chart" id="countChart"></div>
          </div>
        </div>
        <div class="device-good">
          <img
            src="@/assets/sbgl/screen-title02.png"
            alt=""
            class="screen-title"
          />
          <!-- <div class="screen-title-container-l1">
          <img src="@/assets/sbgl/screen-title02.png" alt="" class="screen-title" />
                  <div class="screen-title-text-l1">更多</div>
                </div> -->
          <div class="good-main flex-between">
            <div class="good-card flex-between">
              <div class="good-info">
                <div class="good-title">当月整体设备完好率</div>
                <div class="good-value flex-between">
                  {{ shebei.Yuewanhao }}% <span class="good-unit">完好率</span>
                </div>
              </div>
              <div class="card-chart" id="monthChart"></div>
            </div>
            <div class="good-card flex-between">
              <div class="good-info">
                <div class="good-title">重要设备完好率</div>
                <div class="good-value flex-between">
                  {{ shebei.Zhongwanhao }}%
                  <span class="good-unit">完好率</span>
                </div>
              </div>
              <div class="card-chart" id="mainChart"></div>
            </div>
          </div>
          <div class="good-chart" id="yearChart" style="width: 480px"></div>
        </div>
      </div>
    </div>
  </ScalablePage>
</template>

<script setup lang="ts">
import ScalablePage from "@/components/ScalablePage.vue";
import * as echarts from "echarts";
import { onMounted, ref, toRefs, reactive } from "vue";
import {
  getCurrentDateFormatted,
  getPreviousDay,
  formatCurrentDateTime,
  getLast12MonthsDates,
} from "@/utils/date";

import {
  waterApi,
  equipmentManagementRateAPI,
  importantEquipmentManagementRateAPI,
} from "@/utils/shuiwu/api";
let url = "http://192.168.254.34:8090/info/getIndexVal";

const yuanShui = ref("");
const jingShui = ref("");
// const tatal = ref(0);
// const chushui = ref(0);
const state = reactive({
  shebei: {
    shebeiguanli: [],
    total: 0,
    Yuewanhao: 0,
    Zhongwanhao: 0,
  },
  zhongyao: {
    name1: "送水泵房",
    num1: 0,
    name2: "加药间",
    num2: "",
  },
  // water: {
  //   yuanShui: 0,
  //   jingShui: 0,
  //   gongShui: 0,
  // },
  shebeistatus: {
    djx: 0,
    ywx: 0,
    bh: 0,
  },
  weixiu: [],
});

let { shebei, weixiu, shebeistatus, zhongyao } = toRefs(state);
const xdata = ref<number[]>(
  localStorage.getItem("xdata")
    ? JSON.parse(localStorage.getItem("xdata") as string)
    : [850, 328.8, 930, 590, 670, 290, 880, 890, 880, 550, 210, 760]
);
let intervalId = null;
let i = 0;
let months = getLast12MonthsDates();
onMounted(() => {
  shebeiGuanli();
  getMSBWH({ indexCode: months[i] });
  drawDeviceYear();
});

//当月设备完好率接口
function getMshebei() {
  equipmentManagementRateAPI().then((res) => {
    state.shebei.Yuewanhao = Number(res.data.slice(-1)[0]?.value);
    let que = state.shebei.total * (1 - state.shebei.Yuewanhao / 100);
    drawDeviceMonth([state.shebei.total, que]);
  });
}

// getLast12MonthsDates
// 月度设备完好图表
function getMSBWH(reg: { indexCode: string }) {
  months.forEach((e, i) => {
    if (i === months.length) {
      equipmentCondi(i);
    } else {
      equipmentCondi({ indexCode: e }, i);
    }
  });
}

function equipmentCondi(boj: { indexCode: string }, index) {
  if (boj && Object.prototype.toString.call(boj) === "[object Object]") {
    fetch(`${url}?${new URLSearchParams(boj).toString()}`)
      .then((r) => {
        if (r.status === 200) {
          return r.json();
        } else {
          return Promise.reject(r.json());
        }
      })
      .then((res) => {
        xdata.value[index] = res.data[res.data.length - 1]?.IndexVal;
        if (xdata.value.length === months.length) {
          localStorage.setItem("xdata", JSON.stringify(xdata.value));
        }
      });
  } else if (boj && typeof boj === "number") {
  }
}

//重要设备完好率接口
function getZYSBWH() {
  importantEquipmentManagementRateAPI().then((res) => {
    state.shebei.Zhongwanhao = Number(
      res.data.length === 0 ? 100 : res.data.slice(-1)[0]?.value
    );
    let que = state.shebei.total * (1 - state.shebei.Zhongwanhao / 100);
    drawDeviceMain([state.shebei.total, que]);
  });
}

// 设备统计
function drawDeviceCount(xname: string[], data: number[]) {
  var chartDom = document.getElementById("countChart");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    tooltip: {
      trigger: "item",
      show: true,
    },
    legend: {
      show: false,
    },
    grid: {
      left: "10%",
      right: "10%",
      top: "10%",
      bottom: "90",
    },
    color: ["#FFD15C"],
    xAxis: {
      type: "category",
      data: xname,

      axisLabel: {
        color: "#fff",
        fontSize: 14,
        interval: 0,
        rotate: 55,
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "rgba(255, 255, 255, 0.50)",
        fontSize: 10,
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 0.50)",
          width: 1,
          type: "dashed",
        },
      },
    },
    series: [
      {
        name: "每月安全隐患上报数量",
        type: "bar",
        barWidth: 10,
        color: "#1A79E8",
        data: data,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(47, 199, 247, 1)",
              },
              {
                offset: 1,
                color: "rgba(108, 149, 230, 0)",
              },
            ]),
          },
        },
      },
    ],
  };

  option && myChart.setOption(option);
}
// 当月设备完好率
function drawDeviceMonth(data: number[]) {
  var chartDom = document.getElementById("monthChart");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    // tooltip: {
    //   trigger: "item",
    //   show: false,
    // },
    legend: {
      show: false,
    },
    color: ["#06bcdb", "#f48080"],
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["70%", "90%"],
        avoidLabelOverlap: false,

        itemStyle: {
          // borderRadius: 5,
          // borderColor: "rgba(0,0,0,0)",
          // borderWidth: 10,
        },
        label: {
          show: false,
          position: "center",
          fontSize: 16,
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 8,
            color: "#fff",
            fontWeight: "bold",
            formatter: "{b} \n  {d}%",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: data[0], name: "完好" },
          { value: data[1], name: "故障" },
        ],
      },
    ],
  };

  option && myChart.setOption(option);
}
// 重要设备完好率
function drawDeviceMain(data: number[]) {
  var chartDom = document.getElementById("mainChart");
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    // tooltip: {
    //   trigger: "item",
    //   show: false,
    // },
    legend: {
      show: false,
    },
    color: ["#06bcdb", "#f48080"],
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["70%", "90%"],
        avoidLabelOverlap: false,

        itemStyle: {
          // borderRadius: 5,
          // borderColor: "rgba(0,0,0,0)",
          // borderWidth: 10,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 12,
            color: "#fff",
            fontWeight: "bold",
            formatter: "{b} \n  {d}%",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: data[0], name: "完好" },
          { value: data[1], name: "故障" },
        ],
      },
    ],
  };

  option && myChart.setOption(option);
}
// 年度设备完好率趋势
// function drawDeviceYear(xdata: string[], data: string[]) {
function drawDeviceYear() {
  var chartDom = document.getElementById("yearChart");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    tooltip: {
      trigger: "item",
      show: true,
    },
    title: {
      text: "月度设备完好率趋势",
      textStyle: {
        color: "#FFF",
        fontSize: 12,
      },
      left: "1%",
      top: "1%",
    },
    legend: {
      show: false,
    },
    grid: {
      left: "10%",
      right: "10%",
      top: "23%",
      bottom: "10%",
    },
    xAxis: {
      type: "category",
      data: months,
      axisLabel: {
        color: "#DADADA",
        fontSize: 11,
      },
      axisTick: {
        color: "rgba(255, 255, 255, 0.20)",
        fontSize: 10,
      },
      axisLine: {
        color: "rgba(255, 255, 255, 0.20)",
        fontSize: 10,
      },
    },
    yAxis: {
      name: "单位：台",
      nameLocation: "end",
      nameTextStyle: {
        color: "rgba(255, 255, 255, 0.50)",
        fontSize: 10,
      },
      type: "value",
      axisLabel: {
        color: "rgba(255, 255, 255, 0.50)",
        fontSize: 10,
      },

      axisLine: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 0.50)",
          width: 1,
          type: "dashed",
        },
      },
    },
    series: [
      {
        color: "#2694fc",
        data: xdata.value,
        type: "line",
        name: "设备完好率",
        smooth: true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(40,146,249, 0.3)",
            },
            {
              offset: 1,
              color: "rgba(40,146,249, 0)",
            },
          ]),
        },
      },
    ],
  };

  option && myChart.setOption(option);
}
// 设备维修
function drawDeviceRepair() {
  var chartDom = document.getElementById("repairChart");
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    legend: {
      show: false,
    },
    color: ["#06bcdb", "#f48080"],
    series: [
      {
        name: "设备维修",
        type: "pie",
        radius: ["70%", "90%"],
        avoidLabelOverlap: false,
        color: ["#00d059", "#fffa92", "#13e7ff", "#ff627d"],
        itemStyle: {},
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 24,
            color: "#fff",
            fontWeight: "bold",
            formatter: "{b} \n  {d}%",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 50, name: "待维修" },
          { value: 50, name: "维修中" },
          { value: 50, name: "已维修" },
          { value: 50, name: "已验收" },
        ],
      },
    ],
  };

  option && myChart.setOption(option);
}

async function shebeiGuanli() {
  fetch("http://111.113.0.230:8066/orca/equipment/getGroupTotalNum")
    .then((r) => {
      if (r.status === 200) {
        return r.json();
      } else {
        return Promise.reject(r.json());
      }
    })
    .then((res) => {
      let num = 0;
      res.result.forEach((i: { total_num: number }) => {
        num += i.total_num;
      });
      state.shebei.total = num;

      state.shebei.shebeiguanli = res.result;
      getMshebei();
      getZYSBWH();
      let arr = res.result;
      let xname = [],
        data = [];
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].item_text === state.zhongyao.name1) {
          state.zhongyao.num1 = arr[i].total_num;
        }
        if (arr[i].item_text === state.zhongyao.name2) {
          state.zhongyao.num2 = arr[i].total_num;
        }
        xname.push(arr[i].item_text);
        data.push(arr[i].total_num);
      }
      drawDeviceCount(xname, data); //
    });
}
</script>
<style scoped lang="less">
@import url("../styles/sbgl.less");

.screen-title-container-l1 {
  position: relative;
  display: inline-block;
}

.screen-title-text-l1 {
  position: absolute;
  top: 36%;
  left: 57%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 20px;
  text-align: center;
  white-space: nowrap;
}

.left {
  /* background-color: #ccc; */
}

.just {
  width: 100%;
  display: flex;
  height: 160px;
}

#left1 {
  width: 160px;
}

.pump {
  flex: 1;
  height: 100%;
  position: relative;
}

.pump img {
  height: 136px;
  margin-top: 10px;
}

.pump .com-shui {
  position: absolute;
  font-size: 14px;
  height: 26px;
  padding-left: 50px;
  display: flex;
  justify-content: space-between;
  width: 185px;
}

.com-shui div {
  height: 100%;
  line-height: 26px;
  color: #fff;
}

.shuizhi1 {
  /* color: #35ccff; */
  top: 15px;
  height: 100%;
  line-height: 1;
}

.shuizhi2 {
  /* color: #00efff; */
  top: 64px;
}

.erji-con {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.erji-item {
  width: 238px;
  height: 80px;
  display: flex;
}

.erji-item .img-icon {
}

.erji-item-txt {
  flex: 1;
}

.erji-jinshui {
  background: url(../assets/changcheng/bengbg.png) no-repeat;
  height: 21px;
  line-height: 21px;
  font-size: 14px;
  color: #fff;
  padding-left: 7px;
  margin-top: 15px;
}

.erji-data {
  font-family: DINAlternate, DINAlternate;
  font-weight: bold;
  font-size: 22px;
  color: #ffeda8;
  line-height: 26px;
  text-align: left;
  font-style: normal;
  margin-top: 8px;
}

.wanhao {
  display: flex;
  height: 40px;
  border: 1px solid blue;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 10px;
  color: #fdfeff;
  font-style: normal;
}

.wanhao-l {
  width: 160px;
  border: 1px solid blue;
}

.wanhao-r {
  flex: 1;
  border: 1px solid blue;
}

.wanhao-bg {
  background: url(../assets/changcheng/wanhaoicon.png) no-repeat;
}

.wanhao-font {
  font-family: DINAlternate, DINAlternate;
  font-weight: bold;
  font-size: 14px;
  color: #4dcdff;
  line-height: 14px;
  text-align: left;
  font-style: normal;
  margin-top: 5px;
}

.qushi {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 13px;
  color: #cae5ff;
  line-height: 18px;
  font-style: normal;
}

.qushitu {
  height: 150px;
  width: 100%;
  border: 1px solid red;
}

.shebeiweixiutu {
  height: 100%;
  border: 1px solid red;
  width: 194px;
}

.shuizhi3 {
  color: #24eacd;
  top: 114px;
}

.weixiu {
  display: flex;
  height: 178px;
}

.weixiu-item {
  flex: 1;
}

.goto {
  position: absolute;
  top: 0;
  left: 40px;
  height: 45px;
  width: 112px;
  border-bottom: 1px solid rgb(0, 0, 255);
}
</style>
